<template>
  <div class="fillcontain">
    <div class="filter-container">
      <el-tooltip
        class="item"
        effect="dark"
        content="请输入操作人"
        placement="top"
      >
        <el-input
          placeholder="操作人"
          v-model="listQuery.username"
          style="width: 170px;"
        ></el-input>
      </el-tooltip>

      <!-- <el-tooltip
        class="item"
        effect="dark"
        content="请选择模块名称"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.moduleId"
          filterable
          placeholder="模块名称"
        >
          <el-option
            v-for="item in moduleNameOptions"
            :key="item.id"
            :label="item.moduleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip> -->

      <el-date-picker
        v-model="daterangeValue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
        :picker-options="daterangePickerOptions"
      >
      </el-date-picker>

      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <!-- <el-table-column align="center" label="模块名称" fixed>
          <template slot-scope="scope">
            <span>{{ scope.row.moduleName }}</span>
          </template>
        </el-table-column> -->

        <el-table-column align="center" label="操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="请求URL" width="290">
          <template slot-scope="scope">
            <span>{{ scope.row.url }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="请求参数"
          class-name="args"
          width="500"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.args }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="请求时间" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.visitTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>
  </div>
</template>
<script>
import { imgUrl } from "@/filters/index";
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import TablePagination from "@/components/TablePagination";
import {xhrSysLog} from '@api/system'

export default {
  name: "operateLogList",
  components: { TablePagination },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 10,
        username: null,
        moduleId: null
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: "",
      moduleNameOptions: []
    };
  },
  created() {
    // this.getModuleNameOptions();
    this.doSearch();
  },
  methods: {
    doSearch() {
      this.listLoading = true;
      xhrSysLog("sysLog/logList", this.listQuery).then(resp => {
        this.list = resp.data.items;
        this.total = resp.data.count;
        this.listLoading = false;
      });
    },
    // getModuleNameOptions() {
    //   this.$get("sysLog/moduleOptions", this.listQuery).then(resp => {
    //     this.moduleNameOptions = resp.data.items;
    //   });
    // }
  }
};
</script>
<style>
.el-table td.args .cell {
  text-overflow: inherit !important;
  white-space: normal !important;
}
</style>
